<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="订阅消息" width="1000px" @ok="handleSubmit">
    <BasicTable @register="registerTable" :rowSelection="rowSelection" style="padding: 5px;" >
      <template #form-addUser="{ model, field }">
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
      </template>

      <template #channelList="{ record }"> 
        <template v-for="(item, index) in record.channelList" :key="index">
          <Tag style="margin-right: 5px;" color="cyan">{{ item.name }}</Tag>
        </template>
      </template>
    </BasicTable>
  </BasicModal>
  <ReceiverDrawer @register="registerDrawer" @success="reload"/>
</template>
<script lang="ts" setup>
import { ref, unref, toRaw, reactive, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, useTable, FormSchema } from '/@/components/Table';
import { columns, selectSubNoticeSearchForm } from '../data';
import ReceiverDrawer from '../../receiver/components/ReceiverDrawer.vue';
import { ReceiverType } from '../../receiver/receiver.data';
import { useDrawer } from '/@/components/Drawer';
import { pageNotice } from '../api';
import { Tag, Card } from 'ant-design-vue';

const emit = defineEmits(['select', 'register']);
const checkedKeys = ref<Array<string | number>>([]);

const [registerDrawer, { openDrawer }] = useDrawer();

const [registerTable, { reload, getSelectRows }] = useTable({
  api: pageNotice,
  beforeFetch: (params) => {
    params.receiverType = ReceiverType.ADMIN 
  },
  rowKey: 'id',
  columns: columns,
  formConfig: {
    labelWidth: 80,
    schemas: selectSubNoticeSearchForm,
    // baseRowStyle: { maxHeight: "20px", marginBottom: "20px" },
    autoSubmitOnEnter: true,
    showActionButtonGroup: false,
    wrapperCol: { lg: 12, md: 24  }
  },
  immediate: true,
  striped: true,
  useSearchForm: true,
  showTableSetting: false,
  bordered: false,
  showIndexColumn: false,
  canResize: false
})


const rowSelection = {
  type: 'checkbox', // 为 radio 是单选
  columnWidth: 50,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange
}

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {

});

function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

const handleCreate = () => {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true,
  });
}

async function handleSubmit() {
  const selectRows = await getSelectRows().filter(e => checkedKeys.value.includes(e.id))
  setModalProps({ confirmLoading: true });
  closeModal();
  emit('select', toRaw(unref(selectRows.map(e => e.id))));
  setModalProps({ confirmLoading: false });
}

</script>
